<!DOCTYPE html>
<html>
<head>
    <title>handsontable demo</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="handsontable.min.css">
    <link rel="stylesheet" href="handsontable.full.css">
    <!--    <script src="handsontable/jquery-1.12.1.js"></script>-->
    <script src="handsontable.full.js"></script>
    <script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="example">

</div>
<div id="example1"></div>
<input type="button" value="点击生成" onclick="change();">
<input type="button" value="获取HTML" onclick="obtain();">

<script>
    function obtain() {
        console.log($("#example").className, $("#example").html())
    }

    var data = [
        ['日期', '销售地点', '销售商品', '单价', '销量'],
        ['2017-01', '北京', '冰箱', '3399', 530],
        ['2017-01', '天津', '空调', '4299', 522],
        ['2017-01', '上海', '洗衣机', '1299', 544],
        ['2017-01', '广州', '彩电', '4599', 562],
        ['2017-01', '深圳', '热水器', '1099', 430],
        ['2017-02', '重庆', '笔记本电脑', '4999', 666],
        ['2017-02', '厦门', '油烟机', '2899', 438],
        ['2017-02', '青岛', '饮水机', '899', 620],
        ['2017-02', '大连', '手机', '1999', 500]
    ];

    function negativeValueRenderer(instance, td, row, col, prop, value, cellProperties) {
        Handsontable.renderers.TextRenderer.apply(this, arguments);
        if (prop == 'address') {//修改字体颜色
            td.style.color = '#32CD32';                                     //如果要添加其他样式，可以用以下写法                    //td.style = 'font-weight: bold;';
        } else if (prop == 'price') {
            //格式化价格数据
            td.innerText = value != null ? numbro(value).format('0.00') : "";
        } else if (prop == 'sales') {
            //右对齐
            td.style.textAlign = 'right';
            td.innerText = value != null ? numbro(value).format('0,0.00') : "";
        } else if (prop == 'del') {
            //添加自定义的图片，并给图片的chick添加事件
            var escaped = Handsontable.helper.stringify(value),
                imgdel;

            imgdel = document.createElement('IMG');
            imgdel.src = "remove.png";
            imgdel.width = 20;
            imgdel.name = escaped;
            imgdel.style = 'cursor:pointer;';//鼠标移上去变手型
            Handsontable.dom.addEvent(imgdel, 'click', function (event) {
                hot.alter("remove_row", row);//删除当前行
            });

            Handsontable.dom.empty(td);
            td.appendChild(imgdel);
            td.style.textAlign = 'center';//图片居中对齐
            return td;
        }
    }

    Handsontable.renderers.registerRenderer('negativeValueRenderer', negativeValueRenderer);

    var hot = new Handsontable(document.getElementById('example'), {
        data: data,
        colHeaders: true, // 使用自定义列头
        rowHeaders: true,////当值为true时显示行头，当值为数组时，行头为数组的值
        colWidths: 150, // 设置所有列宽为150像素
        filters: true,
        //columnSorting: true,//当值为true时，表示启用排序插件
        sortIndicator: true,
        autoColumnSize: true,//当值为true且列宽未设置时，自适应列大小
        manualColumnResize: true,//当值为true时，允许拖动，当为false时禁止拖动
        undo: true,
        redo: true,
        wordWrap: true,//自动换行
        copyable: true,//是否允许键盘复制
        fillHandle: true,//是否允许拖动复制
        mergeCells: true,//合并单元格
        manualRowResize: true,//当值为true时，允许拖动，当为false时禁止拖动
        manualRowMove: true,//当值为true时，行可拖拽至指定行
        manualColumnMove: true,//当值为true时，列可拖拽移动到指定列
        renderAllRows: true,//是否呈现所有行
        allowInsertRow: true,
        allowInsertColumn: true,
        fixedColumnsLeft: 1, //固定左侧多少列不能水平滚动
        fixedRowsTop: 1,//固定顶部多少行不能垂直滚动
        manualColumnFreeze: true, //当值为true时，选中某 一列，右键菜单会出现freeze this column选项，该选项的作用是固定这一列不可水平滚动，并会将这一列移动到非固定列的前面。再次右键菜单会出现unfreeze this column，意思是取消该列的固定，并将其还原到初始位置。
        customBorders: true,//自定义边框设置,可数组定义
        PersistentState: true,
        //maxCols:3,//最大列数
        //maxRows:3,
        //minSpareRows:3,
        contextMenu: true,
        dropdownMenu: false,//表头筛选
        cells: function (row, col, prop) {//单元格渲染
            var cellProperties = {};
            cellProperties.renderer = "negativeValueRenderer";
            return cellProperties;
        },
    });
    //选择的始末位置
    hot.addHook("afterSelectionEnd", function (r, c, r2, c2) {
        // console.log(r, c, r2, c2)//返回选择的坐标
    });
    hot.addHook('afterOnCellMouseDown', function (event, coords) {
        console.log(coords)
    });
    hot.addHook("afterChange", function (changes,source) {
        // console.log(changes,source);
    });
    hot.addHook("persistentStateSave", function (key, value) {
        // console.log(key);
        // console.log(value);
    });
    hot.addHook("persistentStateLoad", function (key, valuePlaceholder) {
        // console.log(key);
        // console.log(valuePlaceholder);
    });
    hot.addHook("persistentStateReset", function () {
       // console.log(1);
    });
    hot.addHook("modifyRowHeight", function (height,row) {
        // console.log(height, row)
    });
    //将实例转化为html

    function change() {
        console.log(Handsontable.helper.instanceToHTML(hot));
    }

    //将html转化为object
    console.log(Handsontable.helper.htmlToGridSettings("<table><thead><tr><th></th><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr></thead><tbody><tr><th>1</th><td >日期</td><td >销售地点</td><td >销售商品</td><td >单价</td><td >销量</td></tr><tr><th>2</th><td >2017-01</td><td >北京</td><td >冰箱</td><td >3399</td><td >530</td></tr><tr><th>3</th><td >2017-01</td><td >天津</td><td >空调</td><td >4299</td><td >522</td></tr><tr><th>4</th><td >2017-01</td><td >上海</td><td >洗衣机</td><td >1299</td><td >544</td></tr><tr><th>5</th><td >2017-01</td><td >广州</td><td >彩电</td><td >4599</td><td >562</td></tr><tr><th>6</th><td >2017-01</td><td >深圳</td><td >热水器</td><td >1099</td><td >430</td></tr><tr><th>7</th><td >2017-02</td><td >重庆</td><td >笔记本电脑</td><td >4999</td><td >666</td></tr><tr><th>8</th><td >2017-02</td><td >厦门</td><td >油烟机</td><td >2899</td><td >438</td></tr><tr><th>9</th><td >2017-02</td><td >青岛</td><td >饮水机</td><td >899</td><td >620</td></tr><tr><th>10</th><td >2017-02</td><td >大连</td><td >手机</td><td >1999</td><td >500</td></tr></tbody></table>"));
    // console.log(hot.getData())//显示的数据
    // console.log(hot.getSourceData())//所有数据
    // console.log(hot.getValue())//返回选定单元格的值

    // }

</script>
</body>
</html>